<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<html lang="zh">
<head>
    <th:block th:include="include :: header('项目购买列表')"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form id="form-project-add">
        <h4 style="border-left: 3px solid #ed5565;margin-top: 20px">&nbsp;&nbsp;商品信息 </h4>
        <div class="row">
            <div class="col-sm-4" th:each="p,state:${list}">
                <div th:class="${state.index%5==0?'panel panel-primary':(state.index%4==0?'panel panel-success':(state.index%3==0?'panel panel-info':(state.index%2==0?'panel panel-danger':'panel panel-warning')))}">
                    <div class="panel-heading">
                        <span th:class="${state.index%5==0?'label label-primary pull-right':(state.index%4==0?'label label-success pull-right':(state.index%3==0?'label label-info pull-right':(state.index%2==0?'label label-danger pull-right':'label label-warning pull-right')))}">NEW</span>
                        <div class="form-control-static"
                             th:text="${@dict.getLabel('res_project', p.projectName)}"></div>

                    </div>
                    <div class="panel-body">
                        <h4>项目简介</h4>
                        <p th:text="${p.desc}" style="height: 30px;"></p>
                        <div class="row  m-t-sm">
                            <div class="col-sm-12 text-right">
                                &yen;<span th:text="${p.price}" th:id="price+${state.index+1}"></span>
                                <input type="hidden" th:value="${img}" id="img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h4 style="border-left: 3px solid #ed5565;margin-top: 20px">&nbsp;&nbsp;清单信息 </h4>
        <div class="hr-line-dashed"></div>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-primary btn-sm btn-outline" onclick="addColumnA()"><i
                        class="fa fa-plus"> 增加</i>
                </button>
                <button type="button" class="btn btn-danger btn-sm btn-outline" onclick="sub.delColumn()"><i
                        class="fa fa-minus">
                    删除</i></button>
                <table id="bootstrap-table"></table>
            </div>
        </div>

        <div class="hr-line-dashed"></div>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-sm btn-success" onclick="submitHandler()">
                    <i class="fa fa-floppy-o"></i>&nbsp;&nbsp;提&nbsp;&nbsp;交
                </button>&nbsp;&nbsp;
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery.tmpl.js}"/>
<th:block th:include="include :: select2-js"/>
<script th:inline="javascript">
    let prefix = ctx + "res/project";


    $(function () {
        let options = {
            data: [[${res.data}]],
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [{
                checkbox: true
            },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    width: '50',
                    formatter: function (value, row, index) {
                        let columnIndex = $.common.sprintf("<input type='hidden' name='index'  value='%s'>", $.table.serialNumber(index));
                        return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'projectName',
                    align: 'center',
                    title: '商品名称',
                    width: '260',
                    formatter: function (value, row, index) {
                        var data = [{index: index, type: value}];
                        return $("#goodsTypeTpl").tmpl(data).html();
                    }
                },
                {
                    field: 'number',
                    align: 'center',
                    title: '数&nbsp;&nbsp;量',
                    formatter: function (value, row, index) {
                        return $.common.sprintf("<input autocomplete='off' class=\"form-control number valid\" id=\"number" + index + "\" onchange='countPrice(" + index + ")' type='number'name='data[%s].number' value='%s'>", index, value);
                    }
                }, {
                    field: 'totalPrice',
                    align: 'center',
                    title: '总&nbsp;&nbsp;价',
                    formatter: function (value, row, index) {
                        return $.common.sprintf("<input class='form-control' readonly type='text' id=\"totalPrice" + index + "\" name='data[%s].totalPrice' value='%s'>", index, value);
                    }
                }
            ]
        };
        $.table.init(options);
    });


    function addColumnA() {
        let count = $("#" + table.options.id).bootstrapTable('getData').length;
        sub.editColumnModel();

        $("#" + table.options.id).bootstrapTable('insertRow', {
            index: count,
            row: {
                index: $.table.serialNumber(count),
                projectName: "",
                productType: "",
                number: "",
                totalPrice: "",
                number: "",
            }
        });
    }


    let countPrice = (index) => {
        let priceIndex = $('#projectName' + index).val();
        if ($('#number' + index).val() <= 0) {
            $('#number' + index).val(1)
        }
        $('#totalPrice' + index).val(($('#number' + index).val() * $('#price' + priceIndex).text()).toFixed(2));
    }

    let submitHandler = () => {
        let tableData = $('#form-project-add').serialize();
        let totalPrice = 0;
        let count = $("#" + table.options.id).bootstrapTable('getData').length;
        for (let i = 0; i < count; i++) {
            totalPrice = parseFloat($('#totalPrice' + i).val()) + parseFloat(totalPrice);
        }
        $.ajax({
            url: ctx + 'res/order/getBalance',
            success: function (res) {
                let money = res.data['money'];
                if (totalPrice <= money) {
                    done(tableData,'下单成功，请在我的订单列表中查看!')
                } else {
                    layer.msg('余额不足，请先充值!',{icon:2,time:800});
                    setTimeout(function () {
                        layer.open({
                            type: 1,
                            shade: 0.3,
                            title: '在线充值',
                            end:function (){
                                done(tableData,'待订单确认后，可在我的订单中查看进度!');
                            },
                            fix: true,
                            area: [320 + 'px', 420 + 'px'],
                            content: '<img src='+$("#img").val()+' width="320" height="375">',
                            shadeClose: true,
                        })
                    }, 1000)
                }
            }
        })
    }


    let done = (tableData,msg)=> $.ajax({
        url:ctx + 'res/order/edit',
        data:tableData,
        type:'POST',
        success(res){
            if(res.code == 0) {
                layer.msg(msg, {icon: 1, time: 1200})
                setTimeout(function (){
                    $.modal.reload()
                },1200)
            }
        }
    });
</script>

<script id="goodsTypeTpl" type="text/x-jquery-tmpl">
<div>
 <select name="data[${index}].projectName" id="projectName${index}" onchange="countPrice(${index})" class="form-control"
        th:with="type=${@dict.getType('res_project')}">
    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
            th:value="${dict.dictValue}"></option>
</select>
</div>
</script>
</body>
</html>
